import React from 'react'
import PropTypes from 'prop-types';
import CommonHeader from 'COMPONENT/CommonHeader';
import './index.less'
import { Steps, Picker, List, Button, InputItem, Checkbox, WhiteSpace } from 'antd-mobile'
import city from '../../../assets/js/city'
// ========================================
const Step = Steps.Step;
const Item = List.Item;
const AgreeItem = Checkbox.AgreeItem;
// ========================================
class HmdMain extends React.Component {
	static contextTypes = {
	    router: PropTypes.object.isRequired
  	}
    constructor (props) {
        super(props);
        this.state = {
            phone: '13245676543',
            city: ['北京市'],
            address: '',
            contactName: '',
            contactMobile: '',
            relationship: '2',
            btnChecked:'0',
        };
    }
    radioToggleAction = () => {
        let checked = this.state.btnChecked;
        if(checked =='1'){ 
            this.setState({
                btnChecked:'0',
            })
        }else{ 
            this.setState({
                btnChecked:'1',
            })
        }
	}
    render() {
        let that = this;
        // steps
        let stepsArr = [{
            title: '单位信息',
            description: '单位信息'
        }, {
            title: '学历收入',
            description: '学历收入'
        }, {
            title: '联系方式',
            description: '联系方式'
        }].map((s, i) => <Step key={i} title={s.title} />);
        // picker
        let relationship = [
            {label: '父亲', value: '2', title: '与借款人关系'},
            {label: '母亲', value: '1', title: '与借款人关系'},
            {label: '其他血亲', value: '0', title: '与借款人关系'}
        ];
        let iconChecked = this.state.btnChecked=='1'?'icon_radio_checked':'icon_circle';
        return ( 
            <div id="infoStepThree">
                <CommonHeader
                    name='信用贷'
                    leftContentTitle="@back"
                />
                <div style={{paddingTop: '50px'}}></div>
                <Steps current={2} direction="horizontal" size="small"
                       style={{paddingTop: '30px', paddingBottom: '20px', backgroundColor: '#fff'}}>
                    {stepsArr}
                </Steps>
                <div className="infoStepThree-notice">
                    为了您能顺利申请交行惠民贷，请
                    <span className="infoStepThree-notice-yellow">准确填写</span>
                    以下信息
                </div>
                <div>
                    <InputItem clear placeholder="联系电话"
                                defaultValue='13242343212'
                               onChange={ val => {that.setState({phone: val})} }>
                        联系电话
                    </InputItem>
                    <Picker data={ city } cols={1}
                            value={that.state.city}
                            onChange={v => {that.setState({ city: v });}}
                            onOk={v => that.setState({ city: v })}
                    >
                        <Item arrow="horizontal">家庭地址</Item>
                    </Picker>
                    <InputItem clear placeholder="家庭地址" defaultValue='中关村'
                               onChange={ val => {that.setState({address: val})} }> </InputItem>
                </div>
                <div className="infoStepThree-notice">
                    紧急联系人信息
                </div>
                <div>
                    <InputItem clear placeholder="联系人姓名" defaultValue='李*'
                               onChange={ val => {that.setState({contactName: val})} }>
                        联系人姓名
                    </InputItem>
                    <InputItem clear placeholder="联系人手机" defaultValue='13242343212'
                               onChange={ val => {that.setState({contactMobile: val})} }>
                        联系人手机
                    </InputItem>
                    <Picker data={ relationship } cols={1}
                            value={that.state.relationship}
                            onChange={v => {that.setState({ relationship: v });}}
                            onOk={v => that.setState({ relationship: v })}
                    >
                        <Item arrow="horizontal">与借款人关系</Item>
                    </Picker>
                </div>

                <section className="agree_section" onClick={this.radioToggleAction.bind(this)}>
                        <div style={{
                            width:'.4rem',
                            height:'.4rem',
                            marginTop: '.1rem',
                            marginRight:'.1rem',
                            background:'url(./imgs/'+iconChecked+'.png) no-repeat center/100%'
                        }}> 
                        
                        </div>
                        <div className="agreeText">
                            我已阅读并同意
                            <a className="agreeText fontBlue" onClick={(e) => { e.preventDefault();}}>
                                《个人信息查询及提供授权书》
                            </a>
                            及
                            <a className="agreeText fontBlue" onClick={(e) => { e.preventDefault();}}>
                                《个人公积金信息查询及提供授权书》
                            </a>
                        </div>
				</section>
                <WhiteSpace size="lg" />
                 <div className="btnGroup-one">
				    <Button type="primary" className="btnGroup-one-btn" onClick={()=>{
                            that.context.router.push({
                                pathname: '/HmdMain/HmdMainPreApply'
                            });
                        }}
                    disabled={this.state.btnChecked=='1'?false:true}> 提交申请</Button>
				</div>
            </div>
        );
    }
}
// ========================================
export default HmdMain;